<template>
	<view class="container">
		<view class="tabbar">
			<view @tap="navTo(index,item.name)" class="action" v-for="(item,index) in list" :key="index">
				<image class="tabbarIcon" :src="act == index?item.selectIconPath:item.iconPath" mode=""></image>
				<text class="tabbarText" :style="{color:act == index?color:''}">{{item.name}}</text>
			</view>
			<view v-show="scan" class="centerIcon" @tap="scanCode">
				<image class="centerImg" src="../../static/images/public/saoma.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		systemConfig
	} from "@/api/public.js"
	import wechat from '@/common/wechat.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => [{
					name: "首页",
					iconPath: "../../static/images/tabar/home2.png",
					// selectIconPath: "../../static/images/tabar/home1.png"//绿色
					selectIconPath: "../../static/images/tabar/home11.png"//红色
				}, {
					name: "分类",
					iconPath: "../../static/images/tabar/category2.png",
					// selectIconPath: "../../static/images/tabar/category1.png"//绿色
					selectIconPath: "../../static/images/tabar/category11.png" //红色
				}, {
					name: "",
					iconPath: "",
					selectIconPath: ""
				}, {
					name: "线下订单",
					iconPath: "../../static/images/tabar/order2.png",
					// selectIconPath: "../../static/images/tabar/order1.png"//绿色
					selectIconPath: "../../static/images/tabar/order11.png"//红色
				}, {
					name: "我的",
					iconPath: "../../static/images/tabar/user2.png",
					// selectIconPath: "../../static/images/tabar/user1.png" //绿色
					selectIconPath: "../../static/images/tabar/user11.png"//红色
				}]
			},
			scan: {
				type: Boolean,
				default: true
			},
			act: {
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: "#57be6a"
			}
		},
		data() {
			return {
				h5Url: ""
			}
		},
		mounted() {
			//#ifdef APP-PLUS
			systemConfig({
				filed: 'h5_url'
			}).then(res => {
				this.h5Url = res.msg
			})
			//#endif
		},
		methods: {
			navTo(index,name) {
				if (this.scan&&index==2) {
					
				}else {
					this.$emit('current', {current:index,title:name})
				}
				
			},
			scanCode() {
				//#ifdef H5
				wechat.scanQRCode()
				//#endif
				//#ifdef MP-WEIXIN
				uni.scanCode({
				    success: function (res) {
						if(res.path){
							let path = "/" + res.path.split("scene=")[0]
							let scene = encodeURIComponent(res.path.split("scene=")[1])
							let url = path + "scene=" + scene
							uni.navigateTo({
								url:url
							})
						} else {
							uni.showToast({
								icon:"none",
								title:"不能识别该码！"
							})
						}
				    }
				})
				//#endif
				//#ifdef APP-PLUS
				let _this = this
				uni.scanCode({
				    success: function (res) {
							let path1 = res.result.split(_this.h5Url)[1]
							let path2 = path1.split("?")[0]
							let option = path1.split("?")[1]
							let scene = encodeURIComponent(option)
							let url = path2 + "?scene=" + scene
							uni.navigateTo({
								url:url
							})
				    }
				})
				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		z-index: 9999999999999999;
		.tabbar {
			box-shadow:0px 2rpx 18rpx 0px rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0;
			background-color: #ffffff;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 50px;
			padding-bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 99999999999999999;
			.action {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.tabbarIcon{
					width: 50rpx;
					height: 50rpx;
				}
				.tabbarText{
					font-size: 20rpx;
				}
			}
			.centerIcon{
				position: absolute;
				background-color: $theme-color;
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
				top: -20rpx;
				left: 50%;
				margin-left: -45rpx;
				border: 10rpx solid #fff;
				box-sizing: border-box;
				.centerImg{
					display: block;
					margin: 12rpx auto;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		
	}
</style>
